<template>
  <div class="app-container">
    <!-- 添加或修改流程结点对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" v-if="open" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddFlowSkip">添加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteFlowSkip">删除</el-button>
        </el-col>
      </el-row>
      <el-table :data="skipList" :row-class-name="rowFlowSkipIndex" @selection-change="handleFlowSkipSelectionChange" ref="flowSkip">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="序号" align="center" prop="index" width="50"/>
        <el-table-column label="跳转类型" prop="skipType" v-if='nodeType === 1'>
          <template slot-scope="scope">
            <el-input v-model="scope.row.skipType" placeholder="请选择跳转类型"/>
          </template>

          <template slot-scope="scope">
            <el-select v-model="scope.row.skipType">
              <el-option sel label="审批通过" value="PASS"/>
              <el-option label="驳回" value="REJECT"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="跳转条件" prop="skipCondition" v-if='nodeType === 3'>
          <template slot-scope="scope">
            <el-input v-model="scope.row.skipCondition" placeholder="跳转条件"/>
          </template>
        </el-table-column>
        <el-table-column label="目标结点的编码" prop="nextNodeCode" width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.nextNodeCode" placeholder="请选择流程状态" clearable>
              <el-option
                v-for="dict in nodeList"
                :key="dict.nodeCode"
                :label="dict.nodeName"
                :value="dict.nodeCode"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel" >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getSkipList, saveSkip} from "@/api/flow/definition";

export default {
  name: "SkipDialog",
  data() {
    return {
      // 子表选中数据
      checkedFlowSkip: [],
      // 结点跳转关联表格数据
      skipList: [],
      // 弹出层标题
      title: "",
      nodeId: null,
      // 流程节点
      nodeList: [],
      nodeType: null,
      // 是否显示弹出层
      open: false,
    };
  },
  methods: {
    /** 打开流程结点弹框 */
    show(nodeList, id, nodeType) {
      this.reset();
      this.nodeList = nodeList
      this.nodeId = id
      this.nodeType = nodeType
      getSkipList(id).then(response => {
        this.skipList = response.data;
        this.title = "跳转规则设置";
        this.open = true;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.skipList = [];
    },
    /** 提交按钮 */
    submitForm() {
      saveSkip(this.skipList, this.nodeId).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.open = false;
        this.$emit('refresh');
      });
    },
    /** 结点跳转关联序号 */
    rowFlowSkipIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 结点跳转关联添加按钮操作 */
    handleAddFlowSkip() {
      let obj = {};
      obj.definitionId = "";
      obj.nowNodeCode = "";
      obj.nextNodeCode = "";
      obj.skipType = "";
      obj.skipCondition = "";
      this.skipList.push(obj);
    },
    /** 结点跳转关联删除按钮操作 */
    handleDeleteFlowSkip() {
      if (this.checkedFlowSkip.length == 0) {
        this.$modal.msgError("请先选择要删除的结点跳转关联数据");
      } else {
        const skipList = this.skipList;
        const checkedFlowSkip = this.checkedFlowSkip;
        this.skipList = skipList.filter(function(item) {
          return checkedFlowSkip.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleFlowSkipSelectionChange(selection) {
      this.checkedFlowSkip = selection.map(item => item.index)
    },
  }
};
</script>

